
import React, { useEffect, useState } from "react"
import { Outlet, useLocation, NavLink, useNavigate } from "react-router-dom"
import { gettitles } from '../../router/gettitle'
//
import icon from '../../assets/react.svg'

export default () => {

    const { pathname } = useLocation();
    const navigate = useNavigate()

    //# data

    const [pagetitle, setPagetitle] = useState('')
    const [load, setLoad] = useState(0)
    const [lefttop, setLefttop] = useState({ float: 'left', paddingRight: 20, height: '80px', width: '260px' })
    const [lefttop2, setLefttop2] = useState({ float: 'left', marginRight: 0, paddingTop: '20px', height: '80px', minWidth: '10px', boxSizing: 'border-box', fontSize: '30px' })
    const [righttop, setRighttop] = useState({ float: 'right', paddingTop: '22px' })
    const [head, setHead] = useState({ display: 'inline-block', marginRight: 20, width: '35px', height: '35px' })
    const [headtitle, setHeadtitle] = useState({ display: 'inline-block', marginRight: 20, marginTop: 2, maxWidth: 90, fontSize: 20, verticalAlign: 'top', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' })
    const [lefttoppaddingtop, setLefttoppaddingtop] = useState('20px')
    const [lefttoppaddingleft, setLefttoppaddingleft] = useState('20px')
    const [ifshownav, setIfshownav] = useState('1')
    const [hidenav, setHidenav] = useState(0)
    const [hidenav2, setHidenav2] = useState(1)
    const [navleft, setNavleft] = useState('-280px')
    // const [navleft2, setNavleft2] = useState('280px')
    const [navleft2, setNavleft2] = useState('0px')

    //# methods

    const tosetdom = () => {
        var winwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        if (winwidth < 800) {
            setLefttop(() => { var temp = { ...lefttop }; temp.width = 'auto'; return { ...temp } })
            setHeadtitle(() => { var temp = { ...headtitle }; temp.display = 'none'; return { ...temp } })
            // setNavleft(() => ('-280px'))
            // setNavleft2(() => ('0px'))
            setHidenav(() => 1)
            // if (ifshownav == '1') {
            //     setNavleft(() => ('0px'))
            // }
        } else {
            setLefttop(() => { var temp = { ...lefttop }; temp.width = hidenav2 ? 'auto' : '260px'; return { ...temp } })
            setHeadtitle(() => { var temp = { ...headtitle }; temp.display = 'inline-block'; return { ...temp } })
            // setNavleft(() => ('0px'))
            // setNavleft2(() => ('280px'))
            setHidenav(() => 0)

        }
    }

    const resizes = () => {
        tosetdom()
    }

    const setdom = () => {
        tosetdom()
        window.removeEventListener('resize', resizes)
        window.addEventListener('resize', resizes)
    }

    //

    const setnavs = () => {
        var winwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        // if (winwidth < 800) {
        React.updateobj.updates = 1
        if (ifshownav == 0) {
            React.updateobj.updatename = 'setnavs'
            setIfshownav((res) => ('1'))
        } else {
            React.updateobj.updatename = 'setnavs'
            setIfshownav((res) => ('0'))
        }
        // if (ifshownav == '1' && navleft == '-280px') {
        //     setNavleft(() => ('0px'))
        // } else {
        //     if (ifshownav == '0' && navleft == '-280px') {
        //         setNavleft(() => ('-280px'))
        //     } else if (load == 1) {
        //         setNavleft(() => ('-280px'))
        //     }
        // }
        if (ifshownav == '1' && navleft == '-280px') {
            setNavleft(() => ('0px'))
        } else {
            setNavleft(() => ('-280px'))
        }
        // }
    }

    const getlink = () => {
        var temp;
        for (var i = 0; i < gettitles.length; i++) {
            if (pathname == gettitles[i].path) {
                temp = gettitles[i].name
            }
        }
        return temp
    }

    const tolinkR = (link) => {
        setnavs()
        navigate(link)
    }

    //# mounted

    const mounted = () => {
        if (load == 0) {
            setLoad(() => (1))
            //其他处理
            setdom()
        }
    }

    // # update

    const updates = () => {
        if (React.updateobj.updatename == 'setnavs') {
            React.updateobj.updatename = ''
            setdom()
        }
        // setPagetitle(() => getlink())
    }

    // # destroyed

    const destroyeds = () => {
        if (React.updateobj.updates == 1) {
            setTimeout(() => {
                React.updateobj.updates = 0
            })
        } else {
            //这里是页面销毁的逻辑
        }
    }

    useEffect(() => {

        //# mounted

        mounted()

        //# update

        updates()

        //# destroyed

        return destroyeds

    }, [ifshownav, pathname])

    return (
        <>
            {/* top */}
            <div style={{ height: '80px' }}>
                <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '80px', borderBottom: '1px solid #ccc', backgroundColor: 'white', zIndex: 30 }}>
                    <div style={lefttop}>
                        <div style={{ display: 'inline-block', paddingTop: lefttoppaddingtop, paddingLeft: lefttoppaddingleft }}>
                            <img src={icon} style={{ width: 40, height: 40 }}></img> <span style={{ display: hidenav == 0 ? 'inline-block' : 'none', verticalAlign: 'top', paddingTop: 10, paddingLeft: 10 }}>尚视云</span>
                        </div>
                    </div>
                    <div style={{ ...lefttop2, ...{ display: hidenav || hidenav2 ? '' : 'none' } }} onClick={() => setnavs()}>&equiv;</div>
                    <div style={righttop}>
                        <img src={icon} style={head}></img>
                        <div style={headtitle}>用户名</div>
                    </div>
                    <div style={{ marginLeft: hidenav ? 118 : hidenav2 ? 190 : 280, marginRight: hidenav ? 90 : 190, marginTop: 20, height: 40, maxWidth: 1150, backgroundColor: '#e0e0e0', borderRadius: '50px' }}>
                        <div style={{ position: "relative", top: 0, width: '100%', height: '100%', overflow: 'hidden', borderRadius: '50px' }}>
                            <div style={{ padding: '12px 85px 12px 15px' }}>
                                <input type="text" style={{ verticalAlign: 'top', width: '100%', backgroundColor: "#e0e0e0", fontSize: 16 }} placeholder="输入关键词进行搜索" />
                            </div>
                            <button style={{ position: "absolute", right: 0, top: 0, width: 70, height: '100%' }}>搜索</button>
                        </div>
                    </div>
                </div>
            </div >
            {/* left */}
            <div style={{ paddingLeft: navleft2 }}>
                <div style={{ position: 'fixed', left: navleft, top: '81px', width: '280px', height: 'calc(100% - 81px)', borderRight: '1px solid #ccc', backgroundColor: 'white', overflow: 'hidden auto', zIndex: 30 }}>
                    <div style={{ padding: '20px' }} onClick={() => tolinkR('/home/index')}><img src={icon} style={{ ...head, ...{ width: 20, height: 20, marginRight: 10, verticalAlign: 'top' } }}></img>首页</div>
                    <div style={{ padding: '20px' }} onClick={() => tolinkR('/home/activity')}><img src={icon} style={{ ...head, ...{ width: 20, height: 20, marginRight: 10, verticalAlign: 'top' } }}></img>动态</div>
                    <div style={{ padding: '20px' }} onClick={() => tolinkR('/home/tobook')}><img src={icon} style={{ ...head, ...{ width: 20, height: 20, marginRight: 10, verticalAlign: 'top' } }}></img>订阅</div>
                </div>
                <Outlet />
            </div >
        </>
    )
}